<template>
      <el-container>
        <el-aside>
          <show></show>
        </el-aside>
        <el-main style="overflow:hidden;"><loginWrapper></loginWrapper></el-main>
      </el-container>
</template>

<script>
import show from './show.vue'
import loginWrapper from './LoginWrapper'
export default {
  name: 'LoginContainer',
  components: {
    loginWrapper,
    show
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-container{
  width: 100%;
  height: 100%;
  flex: 13;
}
.el-aside {
  background-color: #161d31;
  color: #333;
  text-align: center;
  height: 100%;
  flex: 10;
  background: linear-gradient(45deg,#283046 0%,#161d31 100% );
  animation: gradient 7.5s ease-in-out infinite;
}
/*背景渐变 */
@keyframes gradient{
  50%{
    background-position: 100% 0%;
  }
}
.el-main {
  background-color:#283046;
  /* opacity: 10%; */
  color: #333;
  text-align: center;
  height: 100%;
  width: 100%;
  flex: 4;
  /* border: 1px solid red; */
}
</style>
